<template>

	<view  class="all_box">
		<view style="z-index: ;">
			<u-navbar back-text="" :title="title" :background="background" title-color='#FFF' back-icon-color='#FFF' style='border-bottom: none;'></u-navbar>
		</view>
		

		<view class="content">
			<!-- 正文内容 -->
			
		<!-- 	<ren-dropdown-filter  :filterData='filterData' :defaultIndex='defaultIndex' :regionIndex='regionIndex' 
			    @onSelected='onSelected' @dateChange='dateChange'  @city='getSonValue'></ren-dropdown-filter> -->
			
			
			
		</view>		
				
		<!--列表主体 -->
		<view class="u-flex-col u-col-center" style=""  @click="orderForms(1)">
			<view class="yue_li u-flex  u_margin_top" style="">
				<view class="yue_li_left u-flex u-row-center u-col-center">
					<view class="u-font-30 u-font-bold u-color-balck6">
						<image :src="img" class="yunimg" style=""></image>
						<button class="yy_status" style="">可预约</button>
					</view>
					
				</view>
				<view  class="yue_li_right" style="">
					<view  class="in_title u-font-bold u-font-29" style="margin-top: 60rpx;">
						<text>爱新觉罗弘历</text>
						<view class="in_ui" style="">
							<u-icon name="integral-fill" color="#00ff00"></u-icon>实名认证
						</view>
						<view  class="in_ui" style="">
							<u-icon name="integral-fill" color="#00ff00"></u-icon>健康认证
						</view>
						<view  class="in_ui" style="">
							<u-icon name="integral-fill" color="#00ff00"></u-icon>专业认证
						</view>
					
					</view>
					<!-- 评分 -->
					<view class="in_title">
						<u-rate :current="count" :disabled="true" active-color="#FF9812"></u-rate>
					</view>
					<!-- 已售 -->
					<view class="in_title">
						<u-icon name="order" color="#dab005"></u-icon> <text style="margin-left: 20rpx;">已售：485</text>
						</view>
					<!-- 收藏 -->
					<view  class="in_title" style="width: 100%;z-index: 1100;font-size: 26rpx;">
						<u-icon name="heart-fill" color="#FA3534"></u-icon>
						<text  style="margin-left: 5rpx;">收藏:3998</text>
						
						<u-icon style="margin-left:20rpx;" name="chat"></u-icon>
						<text  style="margin-left: 5rpx;">评论:9899</text>
						
						<u-icon  style="margin-left:20rpx;" name="map" color="#ffaa00"></u-icon>
						<text  style="margin-left: 5rpx;">9999.535KM</text>
						
					</view>
					<view style="float: right;margin-top: -130rpx;">
						<button   class="yy" type="default">预约TA</button>
					</view>
				</view> 
				
			</view>
		
		
		
		
		</view>
		

	
		<!--如果没有网络-->
		<u-no-network></u-no-network>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	
	export default {
		
			data() {
				return {
					goodid:1,
					count:5,
					value: 2,
					background:{
						backgroundColor: '#19BE6B',
						backgroundSize: 'cover',
						backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))',
						
						
					},
					 value: '',
					 shape: 'round',
					 clearabled: true,
					 showAction: true,
					 inputAlign: 'left',
					 
					 // 筛选
					filterData:[
					    [{ text: '全部类型', value: '' }, { text: '按距离远近', value: 1 }, { text: '按好评优先', value: 2 }, { text: '按价格高低', value: 3 }],
					    [{ text: '全部状态', value: '' }, { text: '可预约', value: 1 }, { text: '可服务', value: 2 }, { text: '服务中', value: 3 }, { text: '休息中', value: 4}, { text: '不可预约', value: 5 }]
					],
					defaultIndex:[0,0],
					img:'/static/uview/example/massage.jpg',
					regionStr:'',
					regionIndex: [0, 0, 0],
					defaultValue: [0, 0, 0],
					result:'',
					title:'',
					test:''
				}
			},
			watch: {
				// 这里的演示为证明通过v-model绑定值，它是双向绑定的，意味着您无需监听change事件
				// 也能知道value值当前的内容
				value(val) {
					// console.log(val);
				}
				
			},
			onLoad(options){
				//this.value=4;
				this.title=options.name;
			},
			methods:{
				 getSonValue: function(res){
				           //console.log("res=========",res)
						   this.result=res;
				  },
				// result:(value){
				// 	console.log(value);
				// },
				// change(value) {
				// 	// 搜索框内容变化时，会触发此事件，value值为输入框的内容
				// 	console.log(value);
				// },
				// custom(value) {
				// 	console.log(value);
				// 	//this.$u.toast('输入值为：' + value)
				// },
				search(value) {
					this.$refs.uToast.show({
						title: '搜索内容为：' + value,
						type: 'success'
					})
					console.log(value);
				},
				clear() {
					// console.log(this.value);
				},
				open(index) {
					// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
						// 同时内部会自动给当前展开项进行高亮
						this.$refs.uDropdown.highlight();
					},
				close(index) {
						// 关闭的时候，给当前项加上高亮
						// 当然，您也可以通过监听dropdown-item的@change事件进行处理
						this.$refs.uDropdown.highlight(index);
					},
				change() {
									// 更多的细节，如有需要请自行根据业务逻辑进行处理
									// this.$refs.uDropdown.highlight(xxx);
									
				},	
			
				onSelected(res){
				    // uni.showToast({
				    //     icon:'none',
				    //     title:'控制台查看筛选结果'
				    // })
					//console.log(res);
				},
				dateChange(d){
					// console.log(d);
					// console.log(232);
				   // uni.showToast({
				   //     icon:'none',
				   //     title:d
				   // })
				},
				// test(valuess){
				// 	console.log(valuess);
				// },
				orderForms(id){
					
					//类型
					console.log(this.defaultIndex[0]);
					//状态
					console.log(this.defaultIndex[1]);
					//城市	
					console.log(this.result);
				
					
					this.$u.route({
						url: '/pages/comments/index',
						params: {
							id: id,
							type:this.defaultIndex[0],
							status:this.defaultIndex[1],
							city:this.result
						}
					})
				}
			}
		}
</script>

<style  scoped lang="scss">
.area{
	//color:$uni-color-s;
}
// .area{
// 	color: $uni-color;
// }
	.slot-wrap {
			display: flex;
			align-items: center;
			/* 如果您想让slot内容占满整个导航栏的宽度 */
/* 			flex: 1;
 */			/* 如果您想让slot内容与导航栏左右有空隙 */
			padding: 10rpx 20rpx;
			color:#FFFFFF;
		}
	.all_box{
		width: 100%;
	}
	.u-config-wrap {
		padding: 40rpx;
	}
	
	.slot-content {
		background-color: #FFFFFF;
		padding: 24rpx;
		
		.item-box {
			margin-bottom: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			
			.item {
				border: 1px solid $u-type-primary;
				color: $u-type-primary;
				padding: 8rpx 40rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
			}
			
			.active {
				color: #FFFFFF;
				background-color: $u-type-primary;
			}
		}
	}
	
	
	.datajson{
		z-index: 2;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 250px;
		padding: 0 10px;
		background-color: rgba(255,255,255,.8);
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		font-size: 12px;
		.text{
			margin-top: 10px;
		}
		.item{
			width: 15px;
		}
	}
	.place{
			background-color: #ffffff;
			height: 44px;
		}
		.swiper {
			width: 100%;
			margin-top: 10upx;
			display: flex;
			justify-content: center;
			.swiper-box {
				width: 92%;
				height: 230rpx;
		
				overflow: hidden;
				border-radius: 15rpx;
				box-shadow: 0upx 8upx 25rpx rgba(0, 0, 0, 0.2);
				//兼容ios，微信小程序
				position: relative;
				z-index: 1;
				swiper {
					width: 100%;
					height: 230rpx;
					swiper-item {
						image {
							width: 100%;
							height: 230rpx;
						}
					}
				}
				.indicator {
					position: absolute;
					bottom: 20upx;
					left: 20upx;
					background-color: rgba(255, 255, 255, 0.4);
					width: 150upx;
					height: 5upx;
					border-radius: 3upx;
					overflow: hidden;
					display: flex;
					.dots {
						width: 0upx;
						background-color: rgba(255, 255, 255, 1);
						transition: all 0.3s ease-out;
						&.on {
							width: (100%/3);
						}
					}
				}
			}
		}
	.goods-list{
		padding-top: 10px;
			.loading-text{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 30px;
				color: #979797;
				font-size: 12px;
			}
			.product-list{
				width: 92%;
				padding: 0 4% 3vw 4%; 
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.product{
					width: 48%;
					border-radius: 10px;
					background-color: #fff;
					margin: 0 0 7px 0;
					box-shadow: 0 3px 12px rgba(0,0,0,0.1);
					image{
						width: 100%;
						border-radius: 10px 10px 0 0;
					}
					.name{
						width: 92%;
						padding: 5px 4%;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-align: justify;
						overflow: hidden;
						font-size: 15px;
					}
					.info{
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						width: 92%;
						padding: 5px 4% 5px 4%;
						.price{
							color: #e65339;
							font-size: 15px;
							font-weight: 600;
						}
						.slogan{
							color: #807c87;
							font-size: 12px;
						}
					}
				}
				
			}
	}
	.yunimg{
		width: 170rpx;height:170rpx;margin:5rpx 50rpx!important;border-radius: 50%;
	}
	.top_title{
		margin-top: 10rpx;
	}
	.z_titles{
		font-weight:700;
	}
	.y_person{
		font-size: 12rpx;
	}
	.wrap {
		padding: 0 15rpx 15rpx 15rpx;
	}
	// page{
	// 	background-color: #F6F6F6;
	// }
	.topcent{
		width: 750rpx;
		background-color: #FFFFFF;
	}
	.yue_li{
		width: 98%;//720rpx
		border-radius: 10rpx;
		background-color: #FFFFFF;
		//padding: 15rpx;
		padding-left:8rpx;
		height: 240rpx;
		//margin-top: 15rpx;
	}
	.left_xian{
		width: 10rpx;
		height: 170rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		background-color: #18B566;
	}
	.yue_li_left{
		width: 80rpx;
		margin-left: 45rpx;
		border-radius: 15rpx;
	}
	.yue_li_right{
		//width: 90%;
		margin-left:46rpx;
		// //padding:0 1rpx;
		position: relative;
		left: 10rpx; 
		top:-30rpx;
		padding: 0!important;
	}
	.yue_li_rr{
		width: 80rpx;
		//background: #2979FF;
		position: relative;
		top:-30rpx;
	}
	.yy{
		background-color:#19BE6B;
		height: 60rpx;
		line-height: 60rpx;
		color: #FFFFFF;
		//padding: 0 15rpx;
		border-radius: 20rpx;
		float: right;
		font-size: 28rpx;
		// margin: 0 30rpx;
		// padding: 0 20rpx!important;
	}
	 .uni-lastmsg {
	     width: 100%;
	     color: #8b8b8b;
	     display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
	     overflow: hidden;
	     word-break: break-all; 
	     text-overflow: ellipsis;  /* 超出部分省略号 */
	     -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
	     -webkit-line-clamp: 2; /** 显示的行数 **/
	    
	}	
	.yy_status{
		width: 150rpx;height: 40rpx;border-radius: 150rpx;line-height: 40rpx;font-size: 24rpx;background: #18B566;color: #FFFFFF;
	}
	.in_title{
		margin-top:16rpx;
	}
	.in_ui{
		margin-left: 5rpx;font-size: 22rpx;display: inline-block;
	}
	
	.u_margin_top{
		margin-top: 10rpx;
		padding-bottom: 7rpx;
	}
	// .u_margin_top:nth-of-type(1){
	// 	margin-top: 0;
	// }
</style>
